<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="item.keyword ? item.keyword : '请输入商品名称'"
        @search="onSearch"
        @cancel="onCancel"
        v-for="item in search"
        :key="item.keyword"
      />
    </form>
    <div class="searchList">
      <div class="searchListData">
        <header class="hd">
          <h3 class="hotSearch">热门搜索</h3>
        </header>
        <nav class="list">
          <a v-for="(item, index) in searchList" :key="index" class="item">{{
            item.keyword
          }}</a>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      search: [],
      //搜索宽数据
      searchList: [],
      //搜索列表数据
    };
  },
  created() {
    this.searchData();
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      this.$router.back();
    },
    async searchData() {
      let value = await this.$api.search();
      this.search.push(value.data);
      this.searchList = value.data.hotKeywordVOList;
      console.log(value.data);
    },
  },
};
</script>

<style lang="less" scoped>
.searchList {
  background: #fff;
  position: relative;
  .searchListData {
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    padding: 0 19.95px 19.95px;
    margin-bottom: 13.33px;
    .hd {
      font-size: 18.62px;
      color: #999;
      display: flex;
      align-items: center;
      height: 59.85px;
    }
    .list {
      margin: 0 -19.95px -21.28px 0;
      .item {
        padding: 0 9.975px;
        margin: 0 21.28px 21.28px 0;
        float: left;
        border: 1.33px solid #999;
        border-radius: 5.32px;
        line-height: 33.25px;
        font-size: 15.96px;
      }
      .highlight {
        border-color: #dd1a21;
        color: #dd1a21;
      }
    }
  }
}
</style>

